<template>
  <div class="guide">
    <div class="content">
      <div class="condition">
        <h2>高企认定的条件</h2>
        <ul>
          <li v-for="item in conditions" :key="item.id">
            {{ `${item.infoName}：${item.description}` }}
          </li>
        </ul>
      </div>
      <div class="benefits">
        <h2>高企认定的好处</h2>
        <ul>
          <li v-for="item in benefits" :key="item.id">
            {{ `${item.infoName}：${item.description}` }}
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-content">
        <h2>高企申报辅导</h2>
        <p>提供申报辅导、申报支持等系列服务</p>
        <p>让您快速通过高企认定</p>
        <el-button @click="doContact" type="primary" :icon="Message" size="large"
          >联系我们</el-button>
      </div>
    </div>
    <chatDialog ref="chatDialogRef" :user="user" />
  </div>
</template>

<script setup lang="ts">
import { Message } from '@element-plus/icons-vue';
import chatDialog from '@/components/chat-dialog/index.vue';
import { onMounted, ref } from 'vue';
import { reqUserInfo } from '@/api/system';
import { getLoginUserId } from '@/utils/storage';
import { ElMessage } from 'element-plus';
import { highTechEnterprisesInfoList } from '@/api/enterpeise';

const user = ref<any>({});
const benefits = ref<any[]>([]);
const conditions = ref<any[]>([]);
onMounted(() => {
  // 获取系统管理员信息
  const adminId = 1;
  reqUserInfo(adminId).then((res: any) => {
    if (res.code === 200) {
      user.value = res.data;
    }
  });
  const requestData = {
    current: 1,
    size: 50,
  };
  // 获取好处和条件
  highTechEnterprisesInfoList(requestData).then((res: any) => {
    if (res.code === 200) {
      res.data.records?.forEach((item: any) => {
        // 0：好处，1：条件
        if (item.type === '0') {
          benefits.value.push(item);
        } else {
          conditions.value.push(item);
        }
      });
    }
  });
});
// 联系管理员
const chatDialogRef = ref<InstanceType<typeof chatDialog> | null>(null);
function doContact() {
  if (user.value.userId === getLoginUserId()) {
    ElMessage({
      message: '不能将消息发给自己！',
      type: 'error',
    });
    return;
  }
  if (chatDialogRef.value) {
    chatDialogRef.value.dialogFormVisible = true;
  }
}
</script>

<style lang="scss" scoped>
.guide {
  width: 100%;
  padding: 20px 30px;
  .content {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    .condition,
    .benefits {
      h2 {
        font-size: 28px;
        margin-bottom: 30px;
      }
      ul {
        list-style: none;
        li {
          font-size: 16px;
          margin-bottom: 20px;
          &:before {
            content: '•';
            margin-right: 20px;
            color: #47c1bf;
          }
        }
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .bottom-content {
      h2 {
        font-size: 28px;
        margin-bottom: 30px;
      }
      p {
        font-size: 24px;
        color: #666666;
      }
    }
  }
}
</style>
